import Vue from 'vue'

// 一些默认样式，如li前面的黑点
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
// PC端的UI框架，和vant移动端的框架一样
import ElementUI from 'element-ui'
// UI框架的css样式
import 'element-ui/lib/theme-chalk/index.css'
// element框架的语言包，中英切换等等，默认引入的是英文
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
// 全局的css样式
import '@/styles/index.scss' // global css
// 整个项目的页面入口文件
import App from './App'
// vuex的配置
import store from './store'
// 路由配置111
import router from './router'
// 字体图标 --svg图标
import '@/icons' // icon
//
import '@/permission' // permission control
// 公共组件pagetools
import PageTools from '@/components/PageTools'
// 注册组件
Vue.component('PageTools', PageTools)
// 引入我们要注册的插件
import component from './components'
// 全局注册自定义插件
Vue.use(component)
// 引入国家化的包
import i18n from '@/lang'
// 全局注册过滤器--时间格式化
// Vue.filter('formatTime', function (value, str) {
//   return moment(value).format(str)
// })
/*
  进度条的使用
  1.下包
    npm install nprogress --save
  2.引入
    import nProgress from 'nprogress'
    import 'nprogress/nprogress.css'
  3.使用
    nProgress.start()  启动进度条
    nProgress.done()  关闭进度条
    nProgress.set(0.4)  进度条直接到40%
    nProgress.inc() 每触发一次这个方法进度条就增加一个固定的长度
*/

// 如果你不想使用人家给的假数据，那么删掉if就行
// if (process.env.NODE_ENV === "production") {
//   const { mockXHR } = require("../mock");
//   mockXHR();
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

// 阻止生产环境提示消息
Vue.config.productionTip = false
// 下面这行代码是打印的环境变量
// console.log(process.env)

//  我们的自定义指令会有很多在一个大项目中，所以我们可以将这些指令封装到一个模块中，然后再引入到main.js中
// // 自定义全局的指令
// // 第一个参数是自定义指令名
// Vue.directive('imgError', {
//   // 参数1  el:当前指令所在的dom元素
//   // 参数2  binding:指令相关的信息对象
//   inserted(el, binding) {
//     // 但是这个指令会覆盖掉我们用户自己的头像，那怎么办呢？
//     // dom加载失败的时候会触发onerror方法,我们默认头像只能在dom头像图片加载失败之后才能显示
//     el.onerror = function () {
//       el.src = binding.value
//     }

//     // console.log(el, binding)
//   }
// })

// 打印功能的包
import Print from 'vue-print-nb'
Vue.use(Print)

// // 自定义一个改变字体颜色的指令
// Vue.directive('fontColor', {
//   inserted(el, binding) {
//     // console.log(el, binding)
//     el.style.color = binding.value
//   }
// })

// 引入自定义指令的模块
import { imgError, fontColor } from '@/directives'
Vue.directive('imgError', imgError)
Vue.directive('fontColor', fontColor)
// 加入一共有50个自定义指令，现在我要全部注册成全局指令，难道我要写50遍Vue.directive('fontColor', fontColor)吗？
// 答案是绝对不是的。
// 我们这里可以使用一个新的知识点
// 批量注册
// 1.首先要将这50个指令全部都引入进来
// 1.1 使用as修改变量名，将*修改成非关键字【*是个关键字】
// 代码：import * as directiveObj from '@/directives'
// 2.进行遍历；因为这是个对象，所以使用for in
// 代码：for (const key in directiveObj) {
//   Vue.directive(key, directiveObj[key])
// }
// 3.第二种批量注册的方法
/*
  Object.keys(obj) //遍历对象，将对象中每个属性的属性名全都放到一个数组中
  Object.keys(directiveObj).forEach((key)=>{
    Vue.directive(key, directiveObj[key])
  })
  优点：如果我想全局注册以a开头的指令，我们可以对数组进行过滤将以a开头的指令名都拿出来放到一个新的数组，然后再全局注册。还可以对我们的数组进行排序
  灵活性要比for...in要高，因为得到的是一个数组。
  对数组操作的方法函数很多，如排序，过滤，查找，等等。
*/
// 批量注册过滤器
// 先引入
import * as filters from '@/filter'
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key])
})

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: (h) => h(App)
})
